<!--  -->
<template>
  <div class='indexPage'>
    <div class="swiperBox">
      <el-carousel :interval="2000" arrow="never" height="180px">
        <el-carousel-item v-for="item in banner" :key="item">
          <img :src="item" alt="" class="innerBannerImg">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="datacontent">
      <div class="topdata">
        <div class="innerBox">
          <h3>最高可预授信额度(元)</h3>
          <h3>{{ initQuota }}</h3>
          <div>
            最低月息{{ initMonthL }}%，最长分期{{ stagesNum }}期
          </div>
          <h3 class="colorFont">简单贷，&nbsp;&nbsp;&nbsp;不等“贷”</h3>
        </div>
      </div>
      <div class="withdrawal">
        <img src="./../../img/2.png" alt="">
      </div>
      <div class="bottomBtn" @click="toformPage">
        额度试算
      </div>
      <div class="useragreement" :class="{ 'shake-box': isShaking }">
        <div :class="!ischoose ? 'nochooseBox' : 'yeschooseBox'" @click="onclick">
          <span :class="!ischoose ? 'door' : 'showdoor'">·</span>
        </div>我已阅读知晓并同意 <span class="setWordColor" @click="toTips">《个人信息授权与隐私政策》</span>
      </div>
      <div class="lastImg">
        <img src="./../../img/1.png" alt="">
      </div>
      <div style="text-align:center;padding:10px 0;font-size: 12px;color:#e6e6e6;">以上仅作为额度试算测试使用</div>
    </div>
  </div>
</template>

<script>
import { qrQuotaInit } from '@/request/landingpage';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        myKey: '',
        banner: [
          'https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/ddw1650276297893',
          'https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/ddw1650276310060',
          'https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/ddw1655173933374'
        ],
        isShaking: false,
        ischoose: false,
        initQuota: '',
        initMonthL: '',
        stagesNum: '',
        stepsArr: [
          {
            name: '填写资料'
          },
          {
            name: '激活额度'
          },
          {
            name: '马上提现'
          }
        ]
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始化页面
    getInit(myKey){
      sessionStorage.setItem('configkey',myKey)
      
      qrQuotaInit({key: myKey}).then(res => {
        if (res.data.status === 0) {
          this.initQuota = res.data.initQuota
          this.initMonthL = res.data.initMonthL
          this.stagesNum = res.data.stagesNum
          return
        } else if (res.data.status === 1) {
          this.$router.push({
            path: '/statuspage',
            query: {
              status: 1,
              msg: '预计10分钟完成审核，审核通过后业务经理将和您联系，请注意查看！'
            }
          })
        } else if (res.data.status === 2) {
          this.$router.push({
            path: '/statuspage',
            query: {
              status: 2,
              msg: res.data.auditMsg,
              stagesNum: res.data.stagesNum,
              finalMonthL: res.data.finalMonthL,
              finalQuota:res.data.finalQuota
            }
          })
        } else if (res.data.status === 3) {
          this.$router.push({
            path: '/statuspage',
            query: {
              status: 3,
              msg: res.data.auditMsg
            }
          })
        } else if (res.data.status === 4) {
          this.$router.push({
            path: '/statuspage',
            query: {
              status: 4,
              msg: '二维码已失效'
            }
          })
        }
      })
    },
    onclick(){
      this.ischoose = !this.ischoose
    },
    toTips(){
      this.$router.push({
        path: 'tips'
      })
    },
    toformPage(){
      if (!this.ischoose) {
        this.isShaking = true;
        // 300毫秒后移除抖动class，防止动画只执行一次
        setTimeout(() => {
          this.isShaking = false;
        }, 500);
        return
      } else {
        this.$router.push({
          path: '/fromePage'
        })
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取key参数
    const url = window.location.href;
    // 解析URL获取参数
    const getQueryParam = (name) => {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      return urlParams.get(name);
    };

    const keyValue = getQueryParam('key');
    this.getInit(keyValue)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.indexPage {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  min-height: 100vh;
  .swiperBox {
    .innerBannerImg {
      height: 180px;
      width: 100%;
    }
  }
  .datacontent {
    width: 100%;
    margin: 10px 0;
    .topdata {
      width: 96%;
      margin: 0 auto;
      height: auto;
      color: #fff;
      padding: 10px;
      border-radius: 10px;
      background: linear-gradient(165deg,rgba(237, 120, 9, 1) 0%, rgba(61, 217, 126, 1) 50%, rgba(252, 252, 252, 1) 100%);
      .innerBox {
        width: 100%;
        text-align: center;
        .colorFont {
          color: #FFE500;
        }
        h3,div {
          margin-bottom: 10px;
          letter-spacing: 3px;
        }
      }
    }
    .withdrawal {
      width: 96%;
      margin: 10px auto;
      height: auto;
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      img {
        width: 100%;
        height: auto;
      }
    }
    .bottomBtn {
      width: 96%;
      margin: 10px auto;
      height: auto;
      padding: 10px;
      border-radius: 50px;
      background: #ff7e14!important;
      font-weight: 400;
      text-align: center;
      letter-spacing: 10px;
      font-size: 22px;
      color: #fff;
    }
    .useragreement {
      display: flex;
      height: 15px;
      line-height: 15px;
      .setWordColor {
        color: #833AB4;
      }
      .nochooseBox {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 5px 0 0 ;
        border: 1px solid #000;
      }
      .yeschooseBox {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 5px 0 0 ;
        background: #090979;
        text-align: center;
      }
      width: 96%;
      margin: 10px auto;
      height: auto;
      border-radius: 10px;
      font-size: 12px;
    }
    .lastImg {
      width: 96%;
      margin: 0 auto;
      height: auto;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
.showdoor {
  color: #fff;
  font-weight: 600;
}
.door {
  display: none;
}

.shake-box {
  animation: shake 0.5s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>
